<template>
  <div class="list">
    <div>
      <div class="mt-4">
        <h4>选择场景</h4>
        <p v-for="(item, i) in projects" :key="i">
          <b-card
            :title="item.programme.title"
            :img-src="getIcon(item.programme.title)"
            img-alt="Card image"
            img-left
            class="mb-3"
          >
            <b-card-text>
              {{ item.programme.information }}
            </b-card-text>
          </b-card>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Identicon from 'identicon.js';
import md5 from 'md5-node';
@Component({
  components: {
    HelloWorld,
  },
})
export default class List extends Vue {
  private icon: string = '';
  private projects: any[] = [];

  public getIcon(key: string): string {
    const icon = new Identicon(md5(key), 100);
    return 'data:image/png;base64,' + icon.toString();
  }
  public created() {
    Vue.axios
      .get(this.$store.state.url.api + '/projects?expand=programme')
      .then((response) => {
        console.log(response.data);

        this.projects = response.data;
      });
    const icon = new Identicon(md5(Math.random()));
    this.icon = 'data:image/png;base64,' + icon.toString();
  }
}
</script>
